<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#a{
				width: 200px;
				height: 200px;				
				background-color: lightblue;
				padding: 10px;
			}
			#b{
				width: 100px;
				height: 100px;
				background-color: lightcoral;
				padding: 10px;
			}
			#c{
				width: 50px;
				height: 50px;
				background-color: lightpink;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div id="a">
			<div id="b">
				<div id="c">
					C
				</div>
				B
			</div>
			A
		</div>
		<script type="text/javascript">
			// 默认是冒泡方式  c -> b ->a
			// a.onclick = function(){console.log("a")}
			// b.onclick = function(){console.log("b")}
			// c.onclick = function(){
			// 	console.log("c");
			// 	event.stopPropagation();// 停止传递事件
			// }	
					
			// true 捕获  a-> b -> c
			// false 冒泡   c -> b -> a
			a.addEventListener("click",function(){console.log("a")},true);
			b.addEventListener("click",function(){console.log("b");event.stopPropagation()},true);
			c.addEventListener("click",function(){console.log("c")},true);
			
			// event.preventDefault(); 阻止元素的默认事件执行

		</script>
	</body>
</html>